<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>Test Drag</title> 
	<style>
		img{ position:absolute; }
		.move { cursor: move; }
		body{ width:100%; height:800px; }
	</style>
	<script src="../lib/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		$( function(){
			
			var w = 240, h = 171;
			var CELL_WIDTH = CELL_HEIGHT = 32;
			var y = CELL_WIDTH * 4;
			var dx = 0, dy = 0; 
			
			var ctx = document.getElementById('canvas').getContext('2d');  
			var ctx2 = document.getElementById('canvas2').getContext('2d');  
			
			ctx.translate( CELL_WIDTH,  CELL_WIDTH );
		 	ctx.rotate( Math.PI / 12	  );
			var img = new Image();
			img.onload = function(){
				ctx.drawImage( img, 0, y, CELL_WIDTH, CELL_HEIGHT ,
										dx, dy,  CELL_WIDTH, CELL_HEIGHT);
				
				ctx2.drawImage( img, 0, y, CELL_WIDTH, CELL_HEIGHT ,
										dx, dy,  CELL_WIDTH, CELL_HEIGHT);
			}
			img.src = "footman.png";
			
						
		} );
		

		
		
			
	</script> 
</head> 
<body id="canvasdemo"> 
	<canvas id="canvas" width="400" height="400" ></canvas> 
	<canvas id="canvas2" width="400" height="400" ></canvas> 
</body> 
<script></script>
</html>